<template>
  <div class="allOrder">
    <div class="container">
      <!-- 表头 -->
      <ul class="infoBar">
        <li><p>商品信息</p></li>
        <li>单价</li>
        <li>数量</li>
        <li>实付款</li>
        <li>订单状态</li>
      </ul>

      <!-- 表格内容 -->
      <ul class="infoContent" v-if="!orderStatus">
        <li v-for="(item, index) in orderList" :key="item.id" class="orders">
          <div class="itemTop">
            <p>订单编号：&nbsp;{{ item.order_id }}</p>
            <p>
              下单时间：
              {{ item.createdAt.replace("T", " ").replace(".000Z", " ") }}
            </p>
          </div>
          <ul class="itemDetail">
            <li v-for="item1 in goodsList[index]" :key="item1.id" class="goods">
              <div><img :src="item1.s_goods_photos[0].path" alt="" /></div>
              <div>{{ item1.goods_name }}</div>
              <div>{{ item1.price }}</div>
              <div>{{ item1.num }}</div>
              <div>{{ item1.price * item1.num }}</div>
              <div>已支付</div>
            </li>
          </ul>
        </li>
      </ul>

      <div class="noResult" v-if="orderStatus">订单没有内容哦</div>
    </div>

    <!-- 分页器 -->
    <div class="block" v-if="!orderStatus">
      <el-pagination
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="20"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      orderList: [],
      goodsList: [],
      orderStatus: true,
    };
  },
  created() {
    // 获取订单信息
    axios({
      method: "GET",
      url: "http://shop.bluej.cn/api/order",
      params: {
        project_id: 90,
      },
      headers: {
        "x-token": this.$store.state.token,
      },
    })
      .then((res) => {
        this.orderList = res.data.result.rows;
        if (this.orderList.length) {
          console.log(this.orderList);
          // 判断获取的商品有无
          this.orderStatus = false;
          // 获取订单商品信息
          Object.keys(this.orderList).forEach((key) => {
            let item = this.orderList[key].goods_info;
            item = JSON.parse(item);
            this.goodsList.push(item);
          });
          console.log(this.goodsList);
        } else {
          // this.isCar = false;
        }
      })
      .then((err) => {
        // console.log(err);
      });
  },
};
</script>

<style lang="scss" scoped>
.allOrder {
  .container {
    font-size: 13px;
    color: #666;
    text-align: center;
    line-height: 50px;
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 24px;
    .infoBar {
      width: 960px;
      height: 40px;
      li {
        height: 40px;
        float: left;
        text-align: left;
        &:nth-child(1) {
          width: 400px;
          p {
            margin-left: 20px;
          }
        }
        &:nth-child(2) {
          width: 120px;
        }
        &:nth-child(3) {
          width: 130px;
        }
        &:nth-child(4) {
          width: 150px;
        }
        &:nth-child(5) {
          width: 160px;
        }
        &:nth-child(6) {
          width: 125px;
        }
      }
    }
    .infoContent {
      width: 960px;
      .orders {
        // margin-bottom: 16px;
        text-align: center;
        .itemTop {
          width: 100%;
          height: 40px;
          line-height: 40px;
          background-color: #f7f7f7;
          border-top: 1px solid #e6e6e6;
          border-bottom: 1px solid #e6e6e6;
          p {
            font-size: 13px;
            color: #666;
            line-height: 40px;
            margin: 0 48px 0 16px;
            float: left;
          }
        }
        .itemDetail {
          .goods {
            height: 120px;
            border-bottom: 1px solid #e6e6e6;
            div {
              float: left;
              text-align: left;
              line-height: 120px;
              &:nth-child(1) {
                width: 120px;
                height: 120px;
                img {
                  width: 80px;
                  height: 80px;
                  margin: 20px 0 0;
                }
              }
              &:nth-child(2) {
                width: 280px;
              }
              &:nth-child(3) {
                width: 120px;
              }
              &:nth-child(4) {
                width: 130px;
              }
              &:nth-child(5) {
                width: 160px;
              }
            }
          }
        }
      }
    }

    .noResult {
      width: 100%;
      height: 435px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .block {
    float: right;
    margin-top: 10px;
    margin-right: 40px;
  }
}
</style>
